import { SnippetsOutlined, GoldOutlined, UserOutlined,InsuranceOutlined,PoweroffOutlined   } from "@ant-design/icons";
import {Layout, Menu, theme, Dropdown, Modal, Form, Input, message} from "antd";
import { Outlet } from "react-router-dom";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
const { Header, Content, Sider } = Layout;
import {removeToken} from "@/utils/token.js";
import FormItem from "antd/es/form/FormItem/index.js";
import {useState} from "react";
import {resetPassword } from "@/api/auth";
const items1 = ["1", "2", "3"].map((key) => ({
  key,
  label: `nav ${key}`,
}));




const menus = [
  {
    key: "/bpmn/mytodo",
    label: "待办事项",
    icon: <SnippetsOutlined />,
  },
  {
    key: "/bpmn/apply",
    label: "发起申请",
    icon: <SnippetsOutlined />,
  },
  {
    key: "/bpmn/instance",
    label: "流程实例",
    icon: <SnippetsOutlined />,
  },
  {
    key: "/bpmn/process",
    label: "流程管理",
    icon: <GoldOutlined />,
    children: [
      {
        key: "/bpmn/process/definition",
        label: "流程定义",
      },
      {
        key: "/bpmn/process/tasks",
        label: "流程任务",
      },
    ],
  },
  {
    key: "/bpmn/auth",
    label: "权限管理",
    icon: <GoldOutlined />,
    children: [
      {
        key: "/bpmn/auth/user",
        label: "用户信息",
      },
      {
        key: "/bpmn/auth/role",
        label: "用户权限",
      },
    ],
  },
];

const Home = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);





  const items = [
    {
      key: '1',
      label: (
          <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
            个人信息
          </a>
      ),
      icon: <UserOutlined />,
    },
    {
      key: '2',
      label: (
          <a onClick={() => setVisible(true)}>
            修改密码
          </a>
      ),
      icon: <InsuranceOutlined />,
    },
    {
      key: '3',
      label: (
          <a onClick={() => {
                dispatch(logout());
          }}>
            退出
          </a>
      ),
      icon: <PoweroffOutlined />,
    }
  ]

    const closeModal = () => {
        setVisible(false);
        form.resetFields();
    };

    const submit = () => {
        let data = form.getFieldsValue();
        if (data.newPassword !== data.repeatPassword) {
            message.error("两次密码不一致");
            return;
        }
        resetPassword(data).then((res) => {
            if(res.code === 200) {
                message.success("修改成功");
                removeToken();
                window.location.href = "/login";
            }
        })
    };

  // 路由当前路由信息
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  return (
      <>
          <Modal
              title={"修改密码"}
              open={visible}
              onCancel={closeModal}
              onOk={submit}
              width={"400px"}
          >
              <Form
                  form={form}
                  style={{ marginTop: "20px" }}
                  initialValues={{}}
                  labelAlign={"right"}
              >
                  <FormItem name={"oldPassword"} label={"原密码"}>
                      <Input placeholder={"原密码"} />
                  </FormItem>
                  <FormItem name={"newPassword"} label={"新密码"}>
                      <Input placeholder={"新密码"} />
                  </FormItem>
                  <FormItem name={"repeatPassword"} label={"确认密码"}>
                      <Input placeholder={"确认密码"} />
                  </FormItem>
              </Form>
          </Modal>
    <Layout style={{ minHeight: "100vh" }}>
      <Header
        style={{
          display: "flex",
          alignItems: "center",
        }}
      >
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={["2"]}
          items={items1}
          style={{
            flex: 1,
            minWidth: 0,
          }}
        />

        <Dropdown
            menu={{
              items,
            }}
        >
          <img  onClick={(e) => e.preventDefault()}
              src="https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg"
              alt="logo"
              style={{
                height: 32,
                margin: "16px 24px 16px 0",
                cursor: "pointer",
              }}
          />
        </Dropdown>
      </Header>
      <Layout>
        <Sider
          width={200}
          style={{
            background: colorBgContainer,
          }}
        >
          <Menu
            onClick={(e) => {
              navigate(e.key);
            }}
            mode="inline"
            defaultSelectedKeys={["1"]}
            defaultOpenKeys={["sub1"]}
            style={{
              height: "100%",
              borderRight: 0,
            }}
            items={menus}
          />
        </Sider>
        <Layout
          style={{
            padding: "0 24px 24px",
          }}
        >
          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
      </>
  );
};
export default Home;
